/* eslint-disable react-hooks/exhaustive-deps */
import React,{ Fragment,useState ,useEffect} from "react";
import { useNavigate, useLocation, useParams } from 'react-router-dom';
import './index.less'

import TopBar from '../../../components/TopBar/TopBar'
import FloorBar from '../../../components/FloorBar/FloorBar'
import LessonCard from '../../../components/LessonCard/LessonCard'

import qs from "query-string";
import utils from '../../../util/utils'
import http from '../../../util/http'

function LessonList() {
  const navigate = useNavigate ();
  const location = useLocation();
  const queruParam = qs.parse(
    location.search ? location.search.replace('?', '') : ''
  )

  const [hasMore,setHasMore] = useState(true);
  
  const [orderFilterParam,setOrderFilterParam] = useState([
    {
      Id: 0,
      Name: "综合排序"
    },
    {
      Id: 1,
      Name: "最新发布"
    },
    {
      Id: 2,
      Name: "最多浏览"
    },
    {
      Id: 3,
      Name: "最多收藏"
    }
  ])
  const [categoryFilterParam,setCategoryFilterParam] = useState([
    {
      Id: 0,
      CategoryName : "全部分类"
    },
    {
      Id: 1,
      CategoryName : "类别类别"
    },
    {
      Id: 2,
      CategoryName : "类别2"
    },
    {
      Id: 3,
      CategoryName : "类别类别"
    },
    {
      Id: 4,
      CategoryName : "类别4"
    },
    {
      Id: 5,
      CategoryName : "类别类别"
    },
  ])
  const [pageFilterData,setPageFilterData] = useState({
    activeOrderId :queruParam.activeOrderId || 0,
    activeCategoryId :queruParam.activeCategoryId || 0,
    pageIndex:1,
    pageSize:12
  })

  const filterItemClicked = (key,item)=>{
    // 值发生改变
    if(item.Id != pageFilterData[key]){
      if(key === 'activeOrderId'){
        navigate(location.pathname+`?activeOrderId=${item.Id}&activeCategoryId=${pageFilterData.activeCategoryId}`)
      }else if (key === 'activeCategoryId'){
        navigate(location.pathname+`?activeOrderId=${pageFilterData.activeOrderId}&activeCategoryId=${item.Id}`)
      }
    }
  };
  useEffect(() => {
    if( queruParam.activeOrderId != pageFilterData.activeOrderId || queruParam.activeCategoryId != pageFilterData.activeCategoryId){
      setPageFilterData(preData =>{
        let newData = {
          pageIndex:1,
          pageSize:12,
          activeOrderId : Boolean(queruParam.activeOrderId) ? parseInt(queruParam.activeOrderId) : 0,
          activeCategoryId : Boolean(queruParam.activeCategoryId) ? parseInt(queruParam.activeCategoryId) : 0
        };
        return newData;
      })
    }
    
    }, [location]); 
  
  const getMore = ()=>{
    if(hasMore){
      setPageFilterData((preData)=>{
        let newData = {...preData};
        newData.pageIndex += 1;
        return newData;
      })
    }
  }

  useEffect(() => {
      console.log("变化");
  }, [pageFilterData.pageIndex,pageFilterData.activeOrderId,pageFilterData.activeCategoryId]); 



  let arr = [];
  for(let i = 0 ;i<20;i++){
    arr.push(i);
  }

  return (
    <Fragment >
      <TopBar activeIndex={1} ></TopBar>
      
      <div className="lesson-list root-cont">
        <div className="lesson-list-wrap">
          <div className="filter-wrap">
            <div className="filter order-filter">
              {
                orderFilterParam && orderFilterParam.map((item,index)=>(
                  <div className={pageFilterData.activeOrderId == item.Id ? "filter-item active" : "filter-item"} key={item.Id}
                  onClick = { filterItemClicked.bind(this,'activeOrderId',item)}>
                    <span >
                      {item.Name}
                    </span>
                  </div>
                ))
              }
            </div>
            <div className="filter category-filter">
              {
                  categoryFilterParam && categoryFilterParam.map((item,index)=>(
                    <div className={pageFilterData.activeCategoryId == item.Id ? "filter-item active" : "filter-item"} key={item.Id}
                    onClick = { filterItemClicked.bind(this,'activeCategoryId',item)}>
                      <span >
                        {item.CategoryName}
                      </span>
                    </div>
                  ))
              }
            </div>
          </div>
          <div className="lesson-list-cont">
            {
              arr.map((item, index)=>(
                <div className="lesson-item" key={index}>
                  <LessonCard ></LessonCard>
                </div>
              ))
            }
            <i className="mark-i"></i>
            <i className="mark-i"></i>
            <i className="mark-i"></i>
            <i className="mark-i"></i>
          </div>
          <div className="look-more">
            <span onClick={()=>getMore()}>
            查看更多
            <i className="iconfont icon-xiangxiajiantou" style={{marginLeft:'3px'}}></i>
            </span>
          </div>
        </div>
      </div>

      <FloorBar></FloorBar>        
    </Fragment>
    
  )
}

export default LessonList;